<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型内容宽高(box modal content width and height)</title>
  <!-- 
    CSS中设置模态框内容区域（modal content）的宽度和高度通常需要通过调整盒模型属性来实现。CSS中模态框内容区域宽度和高度以及自动宽度、自动高度、最大宽度、最大高度、最小宽度和最小高度的总结： 

      1. 设置模态框内容区域宽度： 
        - 使用 width 属性来设置模态框内容区域的宽度，可以使用像素（px）、百分比（%）等长度单位。 
        - 例如： width: 80%; 将模态框内容区域的宽度设置为父容器宽度的80%。 
      2. 设置模态框内容区域高度： 
        - 使用 height 属性来设置模态框内容区域的高度，同样可以使用像素（px）、百分比（%）等长度单位。 
        - 例如： height: 300px; 将模态框内容区域的高度设置为300像素
      3. 自动宽度和自动高度： 
        -  width: auto; ：使模态框内容区域宽度根据内容自动调整。 
        -  height: auto; ：使模态框内容区域高度根据内容自动调整。 
      4. 最大宽度和最大高度： 
        -  max-width: value; ：设置模态框内容区域的最大宽度，可以是像素（px）、百分比（%）等。 
        -  max-height: value; ：设置模态框内容区域的最大高度，可以是像素（px）、百分比（%）等。 
      5. 最小宽度和最小高度： 
        -  min-width: value; ：设置模态框内容区域的最小宽度，可以是像素（px）、百分比（%）等。 
        -  min-height: value; ：设置模态框内容区域的最小高度，可以是像素（px）、百分比（%）等。 
  -->
  <style>
    /* 设置内容区域宽高 */
    .content-width-height {
      width: 160px;
      height: 160px;
      background-color: #f0f0f0;
    }

    /* 自动宽度和自动高度 - auto 交给浏览器处理决定 */
    .content-width-height-auto01 {
      width: auto;
      height: auto;
      background-color: saddlebrown;
    }
    .content-width-height-auto-02 {
      /* 行内级: 包裹内容 */
      display: inline-block;
      width: auto;
      height: auto;
      background-color: rebeccapurple;
    }
    
    /* max and min */
    .content-width-height-max-min {
      /* 块级元素居中对齐 */
      margin: 0 auto;
      height: 1000px;
      background-color: aquamarine;

      /* 最大宽度 */
      max-width: 500px;
      /* 最小宽度 */
      min-width: 200px;
      /* 最大高度 */
      max-height: 300px;
      /* 最小高度 */
      min-height: 200px;
    }
  </style>
</head>
<body>
  <!-- 设置内容区域宽高 -->
  <div class="content-width-height"></div>

  <!-- 自动宽度和自动高度 -->
  <div class="content-width-height-auto01">
    content-width-height-auto
  </div>
  <div class="content-width-height-auto02">
    content-width-height-auto-2
    content-width-height-auto-2
  </div>
  
  <!-- max and min -->
  <div class="content-width-height-max-min"></div>
</body>
</html>